<template>
  <Row type="flex">
    <Col flex="600px"> <h2 class="title2">参建单位 <i>{{ config.page.total }}</i></h2></Col>
    <Col flex="550px">
      <Row :gutter="[12, 8]">
        <Col :span="10">
          <Input v-model:value="config.params.objectName" placeholder="请输入企业名称" />
        </Col>
        <Col :span="10">
          <Select v-model:value="config.params.objectType">
            <Option value="">全部参建类型</Option>
            <Option :value="item.id" v-for="item in config.type">{{ item.dataValue }}</Option>
          </Select>
        </Col>
        <Col :span="4" class="text-right">
          <Button type="primary" @click=" changeHandler({current: 1}, config)">查询</Button>
        </Col>
      </Row>
    </Col>
  </Row>

  <Table
      :columns="config.columns"
      :row-key="record => record.packId"
      :data-source="config.list"
      :pagination="config.page"
      :loading="config.loading"
      @change="(pagination)=> changeHandler(pagination, config)"
      bordered
  >
    <template #indexSlot="{ index }">{{(config.page.current-1)*10+index+1}}</template>
    <template #name="{ text, record }">
      <router-link target="_blank" :to="{ path: `/company/${record.compId}` }" class="blue" >
        {{ text }}
      </router-link>
    </template>
  </Table>
</template>

<script lang="ts">
import {defineComponent, inject, onMounted, reactive,  toRefs} from 'vue';
import {Row, Col, Table, Input, Select, Button, Modal, Descriptions,} from 'ant-design-vue';
import {  getProjectCorpApi  } from '/@/api/pro';

const columns = [
  { title: '序号', dataIndex: 'index', width: 70, align: 'center', slots: ({ customRender: 'indexSlot' }) },
  { title: '参建类型', dataIndex: 'actiBusiName',width: 150},
  { title: '企业名称', dataIndex: 'compName',width: 280, slots: ({ customRender: 'name' })},
  { title: '统一社会信用代码', dataIndex: 'compCode'},
  { title: '承揽资质', dataIndex: 'projQualName'}
]

export default defineComponent({
  components: {
    Table , Row, Col, Input, Button, Select, Option: Select.Option,
    Modal,Descriptions,DescriptionsItem:Descriptions.Item,
  },
  setup() {
    const applyId = inject('applyId') as string;
    const config = reactive({
      type:[
        {dataValue:'工程总承包', id:'1'},
        {dataValue:'施工单位', id:'2'},
        {dataValue:'勘察单位', id:'3'},
        {dataValue:'设计单位', id:'4'},
        {dataValue:'监理单位', id:'5'},
        {dataValue:'其他', id:'0'}
      ],
      columns: columns,
      list: [],
      loading: false,
      page: {
        total: 0,
        current: 1
      },
      params:{
        objectType:'',
        objectName:''
      }
    })

    const changeHandler = (pagination, config) => {
      const { current } = pagination;
      let { loading, list, page } = toRefs(config);
      loading.value = true;
      let { objectType , objectName } = config.params;
      const params = { applyId, current , objectType , objectName };
      getProjectCorpApi(params).then(({data ,success}) => {
        if(success){
          let { records, current, total } = data;
          list.value = records;
          loading.value = false;
          page.value = {current, total};
        }
      })
    }

    const init = () => {
      //changeHandler({current: 1}, config);
    }

    onMounted(init)
    return {
      config, changeHandler
    }
  },
})
</script>

<style lang="less" scoped>

.ant-col{
  padding-top: 16px;
  margin-bottom: 8px;
}

.ant-select ,.ant-btn{
  width: 100%;
}

.ant-col.text-right{
  padding-right: 0 !important;
}

</style>
